import bindCard from '@/giftCardSubPack/images/giftCard/bindCard.png';
import buyCard from '@/giftCardSubPack/images/giftCard/buyCard.png';
import empty from '@/giftCardSubPack/images/giftCard/empty_thq.png';
import notificationClose from '@/giftCardSubPack/images/giftCard/notificationClose.png';
import { debounce } from '@/utils/helper.js';
import { useShowLoading } from '@/utils/hooks/useShowLoading';
import utils from '@/utils/index';
import { Image, ScrollView, Text, View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import React, { useRef, useState } from 'react';
import { connect } from 'react-redux';
import GiftCardBackground from '../giftCardBackground';
import './index.scss';

const EmptyCard = () => {
  return (
    <View
      className="empty-wrap"
      style={{
        height: utils.getCalcHeight({ bottomMenuHeight: true }, 31),
      }}
    >
      <Image className="empty" src={empty}></Image>
    </View>
  );
};

const CardItem = ({ id, amount, backgroundContent, backgroundType }) => {
  return (
    <View
      className="card-item"
      onClick={() => {
        Taro.navigateTo({ url: `/giftCardSubPack/giftCardDetail/index?id=${id}` });
      }}
    >
      <GiftCardBackground
        className="card-picture"
        {...{ backgroundContent, backgroundType }}
      ></GiftCardBackground>

      <View className="price-banner">
        <View className="price-unit">¥</View>
        <View className="price-number">{amount}</View>
      </View>
    </View>
  );
};

const MyGiftCard = ({
  dispatch,
  loading,
  myGiftCardAmount,
  myGiftCardList,
  myGiftCardFinished,
}) => {
  useShowLoading(loading, ['giftCard/fetchMyGiftCardList']);

  const timestamp = useRef(Date.now());

  // 是否显示顶部的提示框
  const [isShowNotification, setIsShowNotification] = useState(true);

  const goToOrderList = () => {
    Taro.navigateTo({ url: '/giftCardSubPack/giftCardOrderList/index' });
  };

  const goToBuy = () => {
    Taro.navigateTo({ url: '/giftCardSubPack/giftCardShop/index' });
  };

  const goToBind = () => {
    Taro.navigateTo({ url: '/giftCardSubPack/giftCardBind/index' });
  };

  const getNextList = (params = { timestamp: timestamp.current }) => {
    return dispatch({
      type: 'giftCard/fetchMyGiftCardList',
      payload: { pageSize: 10, ...params },
    });
  };

  const getAmount = () => {
    return dispatch({
      type: 'giftCard/getMyGiftCardAmount',
    });
  };

  // 滚动获取
  const handleScrollToLower = debounce(() => {
    !myGiftCardFinished && myGiftCardList?.length > 0 && getNextList();
  }, 1200);

  useDidShow(() => {
    timestamp.current = Date.now();
    // 获取我的提货券列表
    getNextList();

    // 获取提货券总余额
    getAmount();
  });

  return (
    <>
      <View className="myGiftCard">
        {myGiftCardFinished && myGiftCardList?.length === 0 ? (
          <EmptyCard />
        ) : (
          <>
            {isShowNotification && (
              <View className="notification">
                <View className="notification-text">提货券上线啦，快来购买吧~</View>
                <Image
                  className="notification-close"
                  src={notificationClose}
                  onClick={() => {
                    setIsShowNotification(false);
                  }}
                ></Image>
              </View>
            )}

            <View className="available-balance customePageBackgroundStyle">
              <View className="card-order" onClick={goToOrderList}>
                <View className="txt">购券记录</View>
              </View>
              <View className="price-number">{myGiftCardAmount?.amount}</View>
              <View className="price-text">可用余额</View>
            </View>

            <View className="my-gift-card-list">
              <View className="subject">我的提货券</View>

              <ScrollView
                className="card-list"
                enableFlex
                scrollY
                style={{
                  height: utils.getCalcHeight(
                    { bottomMenuHeight: true },
                    isShowNotification ? 54 : 0,
                    222,
                    32,
                    45,
                    24,
                  ),
                }}
                lowerThreshold={240}
                onScrollToLower={handleScrollToLower}
              >
                {myGiftCardList?.map((item) => {
                  return <CardItem key={item.id} {...item}></CardItem>;
                })}
              </ScrollView>
            </View>
          </>
        )}

        <View className="bottom">
          <View className="bottom-container">
            <View className="card-action-item" onClick={goToBuy}>
              <Image className="card-action-icon" src={buyCard} />
              <Text className="card-action-text">购买提货券</Text>
            </View>

            <View className="card-action-item" onClick={goToBind}>
              <Image className="card-action-icon" src={bindCard} />
              <View className="card-action-text">绑定提货券</View>
            </View>
          </View>
        </View>
      </View>
    </>
  );
};
export default connect(({ loading, giftCard }) => ({
  loading,
  myGiftCardAmount: giftCard.myGiftCardAmount,
  myGiftCardList: giftCard.myGiftCardList,
  myGiftCardFinished: giftCard.myGiftCardFinished,
}))(MyGiftCard);
